<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<uni-nav-bar @clickLeft="goBack" left-icon="back" leftIcon="arrowleft" title="商品详情" statusBar="true"
			fixed="true" color="#000000" backgroundColor="#ffffff"></uni-nav-bar>

		<!-- 搜索框 -->
		<view class="search-box">
			<text class="search-icon">🔍</text>
			<input type="text" placeholder="请输入搜索关键词" placeholder-class="placeholder" />
		</view>

		<!-- 订单状态标签 -->
		<view class="order-tabs">
			<view class="tab-item active">全部</view>
			<view class="tab-item">待支付</view>
			<view class="tab-item">待发货</view>
			<view class="tab-item">待收货</view>
			<view class="tab-item">待评价</view>
		</view>

		<!-- 订单列表 -->
		<view class="order-list">
			<!-- 订单项1 -->
			<view class="order-item"  v-for="(item,index) in orderList" @click="orderDetail(item)">
				<view class="order-header">
					<text class="order-time">下单时间 {{item.orderTime}}</text>
					<text class="order-status">已取消</text>
				</view>
				<!-- 就只有一种商品 -->
				<view class="goods-info" v-if="item.orderDetailsList.length <=  1" >
					<image class="goods-img"
						:src="item.orderDetailsList[0].image"
						mode="aspectFill"></image>
					<view class="goods-detail">
						<text class="goods-name">{{item.orderDetailsList[0].name}}</text>
					</view>

					<view class="goods-priceCount">
						<text class="goods-price">¥{{item.orderDetailsList[0].product.price}}</text>
						<text class="goods-count">x {{item.orderDetailsList[0].number}}</text>
					</view>
				</view>
				<!-- 这个是多个不同商品的时候 -->
				<view class="goods-list" v-else  >
					<div class="goods-imgtext" v-for="(imgtxt, index) in item.orderDetailsList">
						<image class="goods-img"
							:src="imgtxt.image"
							mode="aspectFill"></image>
						<text class="goods-count">x{{imgtxt.number}}</text>
					</div>
				</view>
				<view class="order-footer">
					<view class="total-info">
						<text>共{{getTotalProductNumber(item.orderDetailsList)}}件商品</text>
						<text class="total-price">实付款：<text class="price">¥{{item.amount}}</text></text>
					</view>
					<view class="btn-group">
						<button class="btn btn-plain">删除订单</button>
						<button class="btn btn-primary">再次购买</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script src="./index.js"></script>
<style src="./../../common/Navbar/navbar.scss" lang="scss" scoped></style>
<style src="./index.scss" lang="scss" scoped></style>
<style scoped>
	/* #ifdef MP-WEIXIN || APP-PLUS */
	::v-deep ::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	/* #endif */
</style>